<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
import BScroll from "better-scroll";
// better-scroll基础代码，没有滚动到第一条，滑到哪儿就是哪儿
definePageMeta({
  layout: 'default-home',
  // name: 'home',
  title: 'home',
  i18n: 'menu.home',
});

const { t, setLocale } = useI18n();
const show = ref(false)
const userStore = useUserStore()
const langArr = ref([
  { name: '中文', value: 'zh-CN', url: '/img/en.png', checked: false },
  { name: 'English', value: 'en-US', url: '/img/en.png', checked: false },
  { name: 'Indonesia', value: 'indon', url: '/img/indon.png', checked: false },
  { name: 'Myanmar', value: 'mm', url: '/img/mm.png', checked: false },
  { name: 'Malaysia', value: 'mys', url: '/img/mys.png', checked: false },
  { name: 'Thailand', value: 'th', url: '/img/th.png', checked: false },
  { name: 'Vietnam', value: 'vt', url: '/img/vt.png', checked: false },
])
// 菜单内容数据
const contArr = ref([
  {
    id: 1,
    title: "home_page.leftMenu.favorite",
    icon: 'fire-o',
    urls: 'img/hot.png',
    url: 'img/un-hot.png',
    gameGather: [{
      id: 1,
      name: "游戏1",
      type: "jl",
      img: "/game/jili_icon1.png",
      logo: 'img/jl.png',
      like: false,
      num: 11,
    },
    {
      id: 2,
      name: "游戏2",
      type: "luva",
      img: "/game/luva_icon1.png",
      logo: '/img/luva.png',
      like: true,
      num: 12,
    },
    {
      id: 3,
      name: "游戏3",
      type: "pp",
      img: "/game/pp_icon1.png",
      logo: 'img/pp.png',
      like: false,
      num: 13,
    },
    {
      id: 4,
      name: "游戏4",
      type: "pg",
      img: "/game/pg_icon1.png",
      logo: 'img/pg.png',
      like: false,
      num: 14,
    },
    {
      id: 5,
      name: "游戏5",
      type: "jl",
      img: "/game/jili_icon2.png",
      logo: 'img/jl.png',
      like: false,
      num: 15,
    },
    {
      id: 6,
      name: "游戏6",
      type: "jl",
      img: "/game/jili_icon3.png",
      logo: 'img/jl.png',
      like: false,
      num: 15,
    },
    ]
  },
  {
    id: 2,
    title: "home_page.leftMenu.hots",
    icon: 'like-o',
    urls: 'img/love.png',
    url: 'img/un-love.png',
    gameGather: [{
      id: 1,
      name: "游戏11",
      type: "jl",
      img: "/game/jili_icon3.png",
      logo: 'img/jl.png',
      like: true,
      num: 21,
    },
    {
      id: 2,
      name: "游戏22",
      type: "luva",
      img: "/game/luva_icon2.png",
      logo: 'img/luva.png',
      like: false,
      num: 22,
    },
    {
      id: 3,
      name: "游戏33",
      type: "pp",
      img: "/game/pp_icon2.png",
      logo: 'img/pp.png',
      like: false,
      num: 23,
    },
    {
      id: 4,
      name: "游戏44",
      type: "pg",
      img: "/game/pg_icon2.png",
      logo: 'img/pg.png',
      like: false,
      num: 24,
    },
    {
      id: 5,
      name: "游戏55",
      type: "jl",
      img: "/game/jili_icon2.png",
      logo: 'img/jl.png',
      like: false,
      num: 25,
    },
    {
      id: 6,
      name: "游戏6",
      type: "jl",
      img: "/game/jili_icon3.png",
      logo: 'img/jl.png',
      like: false,
      num: 15,
    },
    ]
  },
  {
    id: 3,
    title: "home_page.leftMenu.slots",
    icon: 'gift-o',
    urls: 'img/slots.png',
    url: 'img/un-slots.png',
    logo: '',
    gameGather: [{
      id: 1,
      name: "游戏111",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 31,
    },
    {
      id: 2,
      name: "游戏222",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: true,
      num: 32,
    },
    {
      id: 3,
      name: "游戏333",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 33
    },
    {
      id: 4,
      name: "游戏444",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 34
    },
    {
      id: 5,
      name: "游戏555",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 35
    },
    ]
  },
  {
    id: 4,
    title: "home_page.leftMenu.chess",
    icon: 'smile-o', urls: 'img/qp.png', url: 'img/un-qp.png', logo: '',
    gameGather: [{
      id: 1,
      name: "游戏1111",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 41
    },
    {
      id: 2,
      name: "游戏2222",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: false,
      num: 42
    },
    {
      id: 3,
      name: "游戏3333",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 43
    },
    {
      id: 4,
      name: "游戏4444",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 44
    },
    {
      id: 5,
      name: "游戏5555",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 45
    },
    ]
  },
  {
    id: 5,
    title: "home_page.leftMenu.fish",
    icon: 'gem-o', urls: 'img/by.png', url: 'img/un-by.png', logo: '',
    gameGather: [{
      id: 1,
      name: "游戏11111",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 51
    },
    {
      id: 2,
      name: "游戏22222",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: false,
      num: 52
    },
    {
      id: 3,
      name: "游戏33333",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 53
    },
    {
      id: 4,
      name: "游戏44444",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 54
    },
    {
      id: 5,
      name: "游戏55555",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 55
    },
    ]
  },
  {
    id: 6,
    title: "home_page.leftMenu.person",
    icon: 'contact-o', urls: 'img/zr.png', url: 'img/un-zr.png', logo: '',
    gameGather: [{
      id: 1,
      name: "游戏61",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 61
    },
    {
      id: 2,
      name: "游戏62",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: false,
      num: 62
    },
    {
      id: 3,
      name: "游戏63",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 63
    },
    {
      id: 4,
      name: "游戏64",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 64
    },
    {
      id: 5,
      name: "游戏65",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 65
    },
    ]
  },
  {
    id: 7,
    title: "home_page.leftMenu.sport",
    icon: 'flag-o', urls: 'img/sport.png', url: 'img/un-sport.png', logo: '',
    gameGather: [{
      id: 1,
      name: "游戏71",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 71
    },
    {
      id: 2,
      name: "游戏72",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: false,
      num: 72
    },
    {
      id: 3,
      name: "游戏73",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 73
    },
    {
      id: 4,
      name: "游戏74",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 74
    },
    {
      id: 5,
      name: "游戏75",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 75
    },
    ]
  },
  {
    id: 8,
    title: "home_page.leftMenu.lottery",
    icon: 'balance-o', urls: 'img/cp.png', url: 'img/un-cp.png', logo: '',
    gameGather: [{
      id: 1,
      name: "游戏81",
      type: "jl",
      img: "~/assets/images/1.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 81
    },
    {
      id: 2,
      name: "游戏82",
      type: "luva",
      img: "~/assets/images/2.jpg",
      logo: 'img/luva.png',
      like: false,
      num: 82
    },
    {
      id: 3,
      name: "游戏83",
      type: "pp",
      img: "~/assets/images/3.jpg",
      logo: 'img/pp.png',
      like: false,
      num: 83
    },
    {
      id: 4,
      name: "游戏84",
      type: "pg",
      img: "~/assets/images/1.jpg",
      logo: 'img/pg.png',
      like: false,
      num: 84
    },
    {
      id: 5,
      name: "游戏85",
      type: "jl",
      img: "~/assets/images/2.jpg",
      logo: 'img/jl.png',
      like: false,
      num: 85
    },
    ]
  },
])
// 当前语言
const curLangObj = ref({
  name: 'English',
  value: 'en-US',
  checked: true,
  url: '/img/en.png'
})
// 语言切换事件
const changeLang = (v: any) => {
  setLocale(v.value)
  Locale.use(v.value)
  localStorage.setItem('lang', v.value)
  show.value = false;
  curLangObj.value = v
  v.checked = true;
};
//初始化语言
function initLanguage() {
  const lang = localStorage.getItem('lang') || 'en-US';//默认英语
  const matchedLang = langArr.value.find(v => v.value === lang);
  if (matchedLang) {
    matchedLang.checked = true
    curLangObj.value = matchedLang;
  }
}

// 在 setup 中调用一次
onMounted(() => {
  initLanguage();
});
const goDetail = (item: any) => {
  console.log(22, item);
  if (specialIndex.value == 0 || specialIndex.value == 1) {
    return
  }

  router.push('/home/details')
}
const specialIndex = ref(0)
const scrollY = ref(0)
const rightSide = ref<number[]>([])
const shopContantRef = ref<HTMLElement | null>(null)

let contScroll: BScroll | null = null
const active = computed(() => {
  const index = rightSide.value.findIndex((top, i) => {
    return scrollY.value >= top && scrollY.value < (rightSide.value[i + 1] || Infinity)
  })
  return index
})
interface ScrollEvent {
  x: number;
  y: number;
}
const onClickNav = (item: any, index: number) => {
  const targetScrollY = rightSide.value[index]
  scrollY.value = targetScrollY || 0
  contScroll?.scrollTo(0, -(targetScrollY ? targetScrollY : 0), 500)
  triggerAnimation()
}
// 初始化 BetterScroll
function initializeRoll() {
  new BScroll(".leftNav", {
    click: true,
  })

  contScroll = new BScroll(".rightContant", {
    probeType: 2,
    click: true,
  })

  contScroll.on("scroll", (event: { x: number; y: number }) => {
  scrollY.value = Math.abs(event.y);
});

  contScroll.on("scrollEnd", (event: { x: number; y: number }) => {
  scrollY.value = Math.abs(event.y);
});

}

// 初始化右侧每个分类的 offsetTop
function initializeOwn() {
  const list = []
  let top = 0
  list.push(top)

  const items = shopContantRef.value?.getElementsByClassName('eventList')
  if (!items) return

  Array.from(items).forEach((li) => {
    top += li.clientHeight
    list.push(top)
  })

  rightSide.value = list
}
const rightContRef = ref<HTMLElement | null>(null)
// 文字缩放抖动动画
const triggerAnimation = () => {
  const rateEls = rightContRef.value?.querySelectorAll('.rate-text')
  rateEls?.forEach((el: Element) => {
    el.classList.remove('animate')
    // 强制 reflow
    void (el as HTMLElement).offsetWidth
    el.classList.add('animate')
  })
}
const router = useRouter();
const goLogin = () => {
  router.push('/login')
}
const goRegister = () => {
  router.push('/register')
}
const goAnnouncement = () => {
  router.push('/home/announcement')
}
const whatType = (v: string, disabled: boolean) => {
  switch (v) {
    case 'luva':
      return 'right-item-luva'
      return disabled ? 'opacity-25 right-item-luva' : 'right-item-luva'
    case 'pp':
      return 'right-item-pp'
      return disabled ? 'opacity-25 right-item-pp' : 'right-item-pp'
    case 'pg':
      return 'right-item-pg'
      return disabled ? 'opacity-25 right-item-pg' : 'right-item-pg'
    case 'jl':
      return 'right-item-jl'
      return disabled ? 'opacity-25 right-item-jl' : 'right-item-jl'
  }
}
const close = ref(true)
const adviseRef = ref(null)
const logoRef = ref(null)
const noticeRef = ref(null)
const adviseHeight = ref(0)
const logoHeight = ref(0)
const twoBoxHeight = ref(0)
onMounted(async () => {
  // 获取用户信息
  await userStore.getUserInfo(0)
  // console.log('home--用户信息', userStore.user);
  initializeRoll()
  setTimeout(initializeOwn, 100) // 延迟确保 DOM 渲染完成
  nextTick(() => {
    if (adviseRef?.value) {
      adviseHeight.value = (adviseRef.value as HTMLElement).offsetHeight - 1;
    }
    if (adviseRef?.value && noticeRef?.value && logoRef.value) {
      twoBoxHeight.value =(logoRef.value as HTMLElement).offsetHeight +(adviseRef.value as HTMLElement).offsetHeight - 3
      logoHeight.value = (logoRef.value as HTMLElement).offsetHeight
    }
  });
});
</script>

<template>
  <div>
    <!-- 下载广告 -->
    <van-sticky>
      <div ref="adviseRef" class=" py-8 px-12 bg-#ffffff" v-if="close">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <van-icon name="cross" @click="close = false" size="30" color="#ccc" />
            <img class="w-35 h-35 mx-10 rounded-2" src="/img/down_icon.png" />
            <div>
              <div class="font-bold color-#2b2e3e text-14">WildWin APP</div>
              <div class="text-10 text-#80859c">描述文本xxxxxxx</div>
            </div>
          </div>
          <div class="border-1 border-gray px-10 py-4 rounded-6 text-14 bg-#179dff color-#ffffff">
            {{ t('home_page.nowDown') }}</div>
        </div>
      </div>
    </van-sticky>
    <!-- 顶部logo -->
    <van-sticky :offset-top="close ? adviseHeight : 0">
      <div ref="logoRef" class="py-5 px-12 bg-[var(--c-primary-100)]">
        <div class="flex items-center justify-between">
          <div class="flex items-center justify-center">
            <img class="w-36 h-36 rounded-full" src="/img/logo_icon.png" />
            <!-- <van-divider vertical :style="{ borderColor: 'gray', height: '35px' }" /> -->
            <div class="ml-10">
              <div class="font-bold color-#00041c">TC</div>
              <div class="text-10 text-#8b94a4">GAMING</div>
            </div>
          </div>
          <div class="flex justify-center items-center">
            <div class="text-10 color-#7e8796">{{ t('home_page.PerUrl') }}:wangye.com</div>
            <img class="w-24 h-24 rounded-full mx-6" :src="curLangObj.url" @click='show = true' />
            <div class="color-#1e2632 text-12" @click='show = true'>{{ curLangObj.name }}</div>
          </div>
        </div>
      </div>
    </van-sticky>
    <!-- 主体部分 -->
    <div class="main-content px-12">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!-- <van-swipe-item v-for="item in swipeList" :key="item.url">
        <img class="w-full h-150 rounded-10" :src="item.url" />
      </van-swipe-item> -->
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="~/assets/images/1.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="~/assets/images/2.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="~/assets/images/3.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="~/assets/images/4.jpg" />
        </van-swipe-item>
      </van-swipe>
      <!-- 消息通知栏 -->
      <van-notice-bar @click="goAnnouncement" color="#7d86a4" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
        background="var(--c-primary-100)">
        <template #left-icon>
          <img src="~/assets/images/web_icon_gb.png" class="w-14 h-14 mr-4" />
        </template>
      </van-notice-bar>
      <van-sticky :offset-top="close ? twoBoxHeight : logoHeight" class="bg-[var(--c-primary-100)]">
        <!-- 登录 注册 -->
        <div class="">
          <div v-if="userStore.isLogin" class="flex justify-between items-center text-dark">
            <div>
              <div class="font-bold text-16 color-#28323e"> {{ t("home_page.no_login") }}</div>
              <div class="text-12 text-[var(--c-text)]"> {{ t("home_page.no_login_desc") }}</div>
            </div>
            <van-space class="login">
              <div class="home-btn w-80" @click="goRegister"> {{ t("home_page.register") }}</div>
              <div class="home-btn w-80" @click="goLogin">{{ t("home_page.login") }}</div>
            </van-space>
          </div>
          <div v-else class="flex justify-between items-center mt-5">
            <div>
              <div><span> {{ userStore.user.name }}</span><span class="ml-10">{{ userStore.user.id }}</span></div>
              <!-- <div class="text-12 text-gray"> ID: {{ userStore.user.id }}</div> -->
              <div class="flex items-center relative w-49">
                <img class="w-15 h-15 relative z-2" src="/img/vip-v.png" alt="">
                <img class="w-48 mr-10 absolute left-2" src="/img/vip-bg.png" alt="">
                <div class="text-10 relative left-4 z-2 color-#ffffff">{{ 'VIP' + userStore.user.curVip }}
                </div>
              </div>
            </div>
            <div><span class="color-#677589 text-10">{{ t("home_page.login_gold") }} :</span><span
                class="color-#172029 font-bold"> 9988999.99</span></div>
          </div>
        </div>
        <!-- 侧边菜单栏 -->
        <div class="flex  justify-between mt-10 overflow-hidden">
          <!-- 左侧菜单 -->
          <div class="leftNav  w-90">
            <div class="menu w-full  h-50  flex flex-col items-center justify-center   mb-3 cursor-pointer"
              :class="{ 'active-menu-item': active === index }" v-for="(item, index) in contArr" :key="index"
              @click="onClickNav(item, index)">
              <img v-show="active === index" :src="item.url" alt="" class="w-20">
              <img v-show="active != index" :src="item.urls" alt="" class="w-20">
              <span class="text-12">{{ t(item.title) }}</span>
            </div>
          </div>
          <!-- 右侧内容 -->
          <div class="rightContant flex-1  pl-5 overflow-y-scroll h-405" ref="rightContRef">
            <div ref="shopContantRef">
              <div class="eventList" v-for="(item, index) in contArr" :key="index">
                <van-grid :column-num="(item.id == 1 || item.id == 2) ? 2 : 1" :border="false"
                  :class="(item.id == 1 || item.id == 2) ? 'two' : 'one'">
                  <van-grid-item v-for="v in item.gameGather" :key="v.id" @click="goDetail(v)">
                    <!-- 2图 -->
                    <div v-if="item.id == 1 || item.id == 2" class="relative">
                      <!-- 2图 -->
                      <img class="w-30 h-30 absolute left-0 top-0" :src="v.logo" />
                      <img class="w-126 h-90 rounded-t-10" :src="v.img" />
                      <div class="w- full px-7 flex justify-between items-center bg-#ffffff rounded-b-10">
                        <div class=" text-12 py-3 my-5 mx-0 overflow-hidden whitespace-nowrap text-ellipsis">{{
                          v.name }}
                        </div>
                        <van-icon size="18" @click.stop="v.like = !v.like" :name="v.like ? 'like' : 'like-o'"
                          :color="v.like ? 'red' : '#cccccc'" />
                      </div>
                    </div>
                    <!-- 1图 -->
                    <div v-else class="relative">
                      <div
                        class="right-item w-full h-105 relative flex items-center justify-between rounded-10 border-1 border-#ffffff "
                        :class="whatType(v.type, v.like)">
                        <div class="w-[100%] h-125 py-16 px-15 relative flex justify-between items-start flex-col">

                          <div class="flex items-center ">
                            <div class="rate-text font-bold text-10 color-#181b2d pt-2"> {{
                              t('home_page.rightCont.infinite')
                            }},{{
                                t('home_page.rightCont.high') }}</div>
                            <i class="rate-text font-bold text-20 color-#1691e8 mt-2 ml-5">1.9%</i>
                          </div>
                          <div class="pl-4 flex items-center">
                            <img src="/img/view.png" alt="" class="w-14 h-12 mr-5">
                            <span class="text-12 text-[var(--c-text)]">{{ v.num }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- <div class="maintence w-full absolute  font-bold text-center" v-if="v.like">
                    <div class="">{{ t('home_page.rightCont.maintenance') }}</div>
                    <div>12月11日 16:32~17:00</div>
                  </div> -->
                    </div>
                  </van-grid-item>
                </van-grid>
              </div>
            </div>
          </div>
        </div>
      </van-sticky>
    </div>
    <van-popup v-model:show="show" position="bottom">
      <div class="p-20">
        <div v-for="v in langArr" :key="v.value" class="flex items-center justify-between h-60" @click="changeLang(v)">
          <div class="flex items-center ">
            <div class="w-39 h-39 bg-#ebf5ff rounded-full flex justify-center items-center"> <img :src="v.url" alt=""
                class="w-24"></div>
            <div>{{ v.name }}</div>
          </div>
          <div>
            <img v-if="v.value == curLangObj.value && v.checked" src="/img/select_lang.png" alt="" class="w-12">
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="css" scoped>
@keyframes zoomShake {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.15);
  }

  50% {
    transform: scale(0.95);
  }

  75% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.rate-text.animate {
  animation: zoomShake 0.6s linear;
}

::v-deep .van-notice-bar__wrap {
  font-size: 14px;
}

.home-btn {
  background: url('/img/home_btn.png') no-repeat center center;
  background-size: 100% 100%;
  color: #6d788e;
  text-align: center;
  padding: 6px 0px;
  font-weight: bold;
  font-size: 14px;
}

.maintence {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu {
  /* background: url('~/assets/images/un-menu-bg.png') no-repeat; */
  background: url('/img/un-menu-bg.png') no-repeat center center;
  background-size: 100% 100%;
  color: var(--c-text);
  font-size: 12px;

  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}

.rebate {
  /* background: url('/img/rebate-bg.png') no-repeat center center; */
  width: 172px;
  background-size: cover;
  height: 18px;
}

.high {
  display: inline-block;
  padding: 1px 0 1px 5px;
  background: #ffffff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.inifite {
  /* padding: 0 15px 0 5px; */
  width: 60%;
  padding: 0 25px 0 18px;
  font-size: 12px;
  background: url('/img/rebate2-bg.png') no-repeat center center;
  background-size: 100% 100%;
  border-bottom-right-radius: 17px;
  border-top-right-radius: 17px;
}

.right-item-luva {
  background: url('/img/LUVA_bg.png') no-repeat center center;
  background-size: 100% 100%;
  border-color: 1px solid #e0eef6;
  width: 260px;
}

.right-item-jl {
  background: url('/img/JL_bg.png') no-repeat center center;
  background-size: 100% 100%;
  border-color: 1px solid #e0eef6;
  width: 260px;
}

.right-item-pp {
  background: url('/img/PP_bg.png') no-repeat center center;
  background-size: 100% 100%;
  border-color: 1px solid #e0eef6;
  width: 260px;
}

.right-item-pg {
  background: url('/img/PG_bg.png') no-repeat center center;
  background-size: 100% 100%;
  border-color: 1px solid #e0eef6;
  width: 260px;
}

/* ::v-deep  .van-grid-item__content {
  padding: 0 !important;
  background: transparent;
  border-radius: 5px;
  margin-bottom: 10px;
} */
::v-deep .two .van-grid-item__content {
  padding: 0 !important;
  background: transparent;
  border-radius: 5px;
  margin-bottom: 10px;
}

::v-deep .two .van-grid-item__content:nth-child(odd) {
  margin-right: 5px;
}

::v-deep .one .van-grid-item__content {
  padding: 0 !important;
  background: transparent;
  border-radius: 5px;
  margin-bottom: 5px;
}

::v-deep .login .van-button--small {
  color: var(--c-text);
  font-size: 12px;
  font-stretch: normal;
}

::v-deep .van-popup--bottom {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.van-notice-bar {
  background: transparent;
  padding: 10px 0;
}

.active-menu-item {
  background: url('/img/menu-bg.png') no-repeat center center;
  /* border-color: var(--c-primary); */
  background-size: 100% 100%;
  font-weight: bold;
  color: #ffffff;
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}

.rate {
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
}

.text-stroke {
  font-weight: bold;
  /* 描边宽度和颜色 */
  -webkit-text-stroke: 1px #2aa1ec;
  /* 文字填充色 */
  color: rgb(255, 255, 255);
}
</style>